<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }

</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>月消耗暂缓项目库存明细及金额</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>环比年份选择</label>
                                    <select style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 65px!important;"
                                            class="form-control" name="year"></select>
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>环比月份选择</label>
                                    <select style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 40px!important;"
                                            class="form-control" name="month"></select>
                                </div>

                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <button type="button" class="btn btn-success" id="btn-search">
                                        <span class="Bold">搜索</span>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
                <div style="float: left; width: 100%; height:10px">
                    <div class="nav-tabs-custom" autocomplete="off">
                        <ul class="nav nav-tabs" id="navTab">
                            <li id="btn_material" class="active"><a onclick="searchTable()" data-id="-1"
                                                                    href="#material" data-toggle="tab"
                                                                    aria-expanded="true">总计</a></li>
                            <li><a name="tabMenu" id="btn_before" onclick="loadInfoTableData(this)"
                                   href="javascript:void(0)" data-toggle="tab"></a></li>
                            <li><a name="tabMenu" id="btn_after" onclick="loadInfoTableData(this)"
                                   href="javascript:void(0)" data-toggle="tab"></a></li>
                        </ul>
                    </div>
                </div>
                <div class="box-body" style="padding-top:50px;">
                    <table id="bootstrap-table" style="table-layout: fixed;"></table>
                    <table id="bootstrap-table-info" style="table-layout: fixed;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var monthCondition;
    var yearCondition;

    function searchTable() {
        $("#bootstrap-table").parent('.fixed-table-body').parent('.fixed-table-container').parent(".bootstrap-table").show()
        $("#bootstrap-table-info").parent('.fixed-table-body').parent('.fixed-table-container').parent(".bootstrap-table").hide()
    }

    /**
     * 加载年月
     * */
    function loadYearAndMonth() {
        let beginYear = 2020;
        let endYear = new Date().getFullYear();
        let monthTextArray = ["", "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
        $("#queryForm [name='year']").empty();
        for (let i = beginYear; i <= endYear; i++) {
            let selected="";
            if(i===endYear){
                selected="selected='selected'";
            }
            $("#queryForm [name='year']").append("<option "+selected+" value='" + i + "'>" + i + "</option>");
        }
        let currentMonth = new Date().getMonth();
        $("#queryForm [name='month']").empty();
        for (let i = 1; i < monthTextArray.length; i++) {
            if (i - 1 === currentMonth - 1) {
                $("#queryForm [name='month']").append("<option selected='selected' value='" + i + "'>" + monthTextArray[i] + "</option>");
            } else {
                $("#queryForm [name='month']").append("<option value='" + i + "'>" + monthTextArray[i] + "</option>");
            }
        }
    }

    /**
     * 获取明细表数据
     * */
    function loadInfoTableData(obj) {
        $("#bootstrap-table").parent('.fixed-table-body').parent('.fixed-table-container').parent(".bootstrap-table").hide()
        $("#bootstrap-table-info").parent('.fixed-table-body').parent('.fixed-table-container').parent(".bootstrap-table").show()
        $.ajax(
            {
                url: ctx + 'overview/statistical/getMaterialInStockInfoData',
                type: 'post',
                traditional: true,// 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: {
                    month: parseInt($(obj).attr('data')),
                    year: parseInt(yearCondition)
                },
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        $("#bootstrap-table-info").bootstrapTable('destroy');
                        js.table.init({
                            id: 'bootstrap-table-info',
                            data: result.data,
                            showColumns: true,
                            showExport: false,
                            pageSize: 300,
                            striped: false,
                            smartDisplay: false,
                            pagination: false,//是否分页
                            uniqueId: "ceoId",
                            onLoadSuccess: function () {
                                $('#bootstrap-table thead th').each(function () {
                                    $(this).width(Math.floor($(this).width()));
                                });
                                $('#bootstrap-table tbody tr:first td').each(function () {
                                    $(this).width(Math.floor($(this).width()));
                                });
                            },
                            columns: [
                                {
                                    title: '序号', field: 'ceoId', width: '50',
                                    formatter: function (value, row, index) {
                                        return index + 1;
                                    }
                                },
                                {title: '单据编号', field: 'ceoCode', width: '150'},
                                {
                                    title: '需求<br>项目号',
                                    field: 'ceoNeedProCode',
                                    formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 100px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '需求<br>项目名称',
                                    field: 'ceoNeedProName',
                                    width: '100',
                                    formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '需求<br>物料描述',
                                    field: 'ceoNeedMatName',
                                    width: '100',
                                    formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {title: '需求<br>数量', field: 'ceoNeedNum'},
                                {title: '单价', field: 'ityPrice'},
                                {title: '金额', field: 'ityAmountOfMoney'},
                                {
                                    title: '挪用<br>项目编号', field: 'ceoUseProCode'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 100px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '挪用<br>项目名称', field: 'ceoUseProName', width: '100'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '挪用<br>物料描述', field: 'ceoUseMatName', width: '100'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '仓库', field: 'whiName', width: '100'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '申请日期', field: 'ceoAppDate', width: '100'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 90px">' + value + '</p>';
                                    }
                                },
                                {
                                    title: '申请人', field: 'ceoAppPerson', width: '70'
                                    , formatter: function (value, row, index) {
                                        if (value == null) {
                                            value = '';
                                        }
                                        return '<p  style="word-wrap: break-word;width: 60px">' + value + '</p>';
                                    }
                                }
                            ]
                        });
                    } else {
                        js.modal.warning(result.msg);
                    }
                },
                error: function () {
                    js.modal.fail();
                }
            }
        );
    }

    /**
     * 加载数据
     */
    function loadData() {
        monthCondition = $("#queryForm [name='month']").val();
        yearCondition = $("#queryForm [name='year']").val();
        $.ajax(
            {
                url: ctx + 'overview/statistical/getInventoryDetailsAndAmountOfMonthlyConsumptionDeferredItemsData',
                type: 'post',
                traditional: true,// 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: $("#queryForm").serialize(),
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        $("#bootstrap-table").empty();
                        let month = $("#queryForm [name='month']").val();
                        $("#btn_before").html(eval(month - 1) + "月明细");
                        $("#btn_before").attr("data", eval(month - 1));
                        $("#btn_after").html(month + "月明细")
                        $("#btn_after").attr("data", month);
                        let headHtml = '<thead><tr><th>序号</th><th>库存类型</th><th>条数</th><th>' + eval(month - 1) + '月统计（元）</th><th>条数</th<th>条数</th><th>' + month + '月统计（元）</th></tr></thead>';
                        $("#bootstrap-table").append(headHtml);
                        let bodyHtml = '<tbody id="bootstrap-table-tbody"></tbody>';
                        $("#bootstrap-table").append(bodyHtml);
                        let trHtml = '<tr><th>' + 1 + '</th><th>消耗暂缓项目库存</th><th>';
                        trHtml += result.data.beforeList[0].timData +
                            '</th><th>' + result.data.beforeList[1].timData +
                            '</th><th>' + result.data.afterList[0].timData +
                            '</th><th>' + result.data.afterList[1].timData + '</th></tr>';
                        $("#bootstrap-table-tbody").append(trHtml);
                    } else {
                        if (result.msg === '无此月份数据，故无法进行环比,是否直接获取当前数据进行环比？') {
                            js.modal.warning("无此月份数据，故无法进行环比");
                        }else{
                            js.modal.warning(result.msg);
                        }
                        // if (result.msg === '无此月份数据，故无法进行环比,是否直接获取当前数据进行环比？') {
                        //     js.modal.confirm(result.msg, function () {
                        //         $.ajax(
                        //             {
                        //                 url: ctx + 'overview/statistical/getMaterialInStockDataByNowData',
                        //                 type: 'post',
                        //                 traditional: true,// 阻止深度序列化， 使参数可以使用数组
                        //                 dataType: 'json',
                        //                 contentType: "application/x-www-form-urlencoded",
                        //                 data: $("#queryForm").serialize(),
                        //                 async: true,                // 异步执行
                        //                 success: function (result) {
                        //                     if (result.type === web_status.SUCCESS) {
                        //                         js.modal.success(result.msg);
                        //                         $("#bootstrap-table").empty();
                        //                         let month = $("#queryForm [name='month']").val();
                        //                         $("#btn_before").html(eval(month - 1) + "月明细");
                        //                         $("#btn_before").attr("data", eval(month - 1));
                        //                         $("#btn_after").html(month + "月明细")
                        //                         $("#btn_after").attr("data", month);
                        //                         let headHtml = '<thead><tr><th>序号</th><th>库存类型</th><th>条数</th><th>' + eval(month - 1) + '月统计（元）</th><th>条数</th<th>条数</th><th>' + month + '月统计（元）</th></tr></thead>';
                        //                         $("#bootstrap-table").append(headHtml);
                        //                         let bodyHtml = '<tbody id="bootstrap-table-tbody"></tbody>';
                        //                         $("#bootstrap-table").append(bodyHtml);
                        //                         let trHtml = '<tr><th>' + 1 + '</th><th>消耗暂缓项目库存</th><th>';
                        //                         trHtml += result.data.beforeList[0].timData +
                        //                             '</th><th>' + result.data.beforeList[1].timData +
                        //                             '</th><th>' + result.data.afterList[0].timData +
                        //                             '</th><th>' + result.data.afterList[1].timData + '</th></tr>';
                        //                         $("#bootstrap-table-tbody").append(trHtml);
                        //                     } else {
                        //                         js.modal.warning(result.msg);
                        //                     }
                        //                 },
                        //                 error: function () {
                        //                     js.modal.fail();
                        //                 }
                        //             }
                        //         );
                        //     });
                        // } else {
                        //     js.modal.warning(result.msg);
                        // }
                    }
                },
                error: function () {
                    js.modal.fail();
                }
            }
        );
    }

    $(function () {
        js.table.init({
            showExport: false,
        });

        /**
         * 加载年月
         */
        loadYearAndMonth();
        /**
         * 加载数据
         */
        loadData();
        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            loadData();
        });
    });
</script>
</body>
</html>